<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<html>
<head>
    <script type="text/javascript">
        $(function () {
            $('input').click(function () {
//                $('div span' ).css('color','blue');

            })
        })
        function f1() {
            $('div span' ).css('color','blue');//下多级元素，不考虑层次
            $('div > span').css('background-color','lightgreen')//仅下一级子元素
            $('div + span').css('color','yellow')//紧挨着的第一个兄弟选择器
            $('div ~ span').css('background-color','red')//后续所有兄弟级
        }
    </script>
</head>
<body>
    <h2>层次选择器</h2>
    <div>
        <span>刘备</span>
        <p><span>阿斗</span></p>
        <span>关羽</span>
    </div>
    <span>吕布</span>
    <span>貂蝉</span>
    <div>董卓</div>
<span>周瑜</span>
<p>黄盖</p>
<span>孙权</span>
<input type="button" value="触发" onclick="f1()">
</body>
</html>
